<template>
  <div class="home-goods">
    猜你喜欢
    <van-list
      v-model:loading="homeStore.loading"
      :finished="homeStore.finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <template v-for="goods in homeStore.goodsList" :key="goods.title">
        <van-config-provider :theme-vars="themeVars">
          <van-card
            :price="goods.price"
            :desc="goods.desc"
            :title="goods.title"
            :thumb="goods.imgUrl"
            @click="toDetail(goods.goodsId)"
          >
            <template #price>
              <span class="price">{{ goods.price }}元</span>
              门市价:￥{{ goods.marketPrice }}
            </template>
          </van-card>
        </van-config-provider>
      </template>
    </van-list>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useHomeStore } from "@/store";
import { useRouter } from "vue-router";

const router = useRouter();
const homeStore = useHomeStore();
const themeVars = {
  cardFontSize: "4vw",
  cardTextColor: "#333",
};
const onLoad = () => {
  homeStore.setGoodsList();
};
const toDetail=(goodsId)=>{
  // console.log(e,'todetail')
  router.push(`/detail/${goodsId}`)
}
</script>

<style lang="less" scoped>
.home-goods {
  .price {
    font-size: 4.8vw;
    color: #f60;
  }
}
//  ::v-deep :root:root {
//   	--van-font-size-sm:4vw !important;
//     --van-card-font-size:4vw !important;
// }
::v-deep :root {
  --van-button-primary-background: red !important ;
}
</style>